<template>
  <div>
    <fwb-modal id="camerasModal" size="md" @close="close">
      <template #header>
        <div
          class="flex items-center h-[60px] text-[14px] s4k:text-[16px] px-5 font-medium leading-[60px] box-border"
          style="color: #9ca3af"
        >Add Cameras by Scanning</div>
      </template>
      <template #body>
        <div class="flex justify-between" style="border: 1px 0 1px 0 solid var(--grid)">
          <!-- 左侧 -->
          <div
            class="w-[241px] h-[602px] px-5 pt-6 s4k:h-[650px]"
            style="border-right: 1px solid var(--grid);"
          >
            <div class="s4k:mt-[-10px]">
              <b
                class="leading-none text-[20px] font-bold text-[var(--theme-font-color)]"
              >Scan for Cameras</b>
              <p
                class="m-0 p-0 text-[14px] font-medium mt-[6px] h-[21px] leading-[21px]"
                style="color: #9ca3af"
              >All fields below are optional</p>
            </div>
            <div class="mt-7 s2k:mt-4 s4k:mt-[20px]">
              <p
                class="m-0 p-0 text-[12px] font-medium text-[var(--theme-font-color)] mb-2"
              >IP Address (Optional)</p>
              <fwb-input v-model="addressOptional" placeholder class="s4k:rounded-[8px]" id="address" style="width: 100%"></fwb-input>
              <p
                class="m-0 p-0 text-[12px] font-normal mt-1"
                style="color: #9ca3af"
              >
                We will search for IP addresses entered here. Indicate the range
                with a hyphen (ie. 10-15)
              </p>
            </div>

            <div class="mt-7 s2k:mt-4 pb-5 s2k:pb-3 s4k:mt-[20px]" style="border-bottom:1px solid var(--grid);">
              <p
                class="m-0 p-0 text-[12px] font-medium text-[var(--theme-font-color)] mb-2"
              >Port (Optional)</p>

              <fwb-input v-model="addressPort" placeholder class="s4k:rounded-[8px]" id="address" style="width: 100%"></fwb-input>
            </div>

            <div class="mt-5 s4k:mt-[20px]">
              <p
                class="m-0 p-0 text-[14px] font-semibold"
                style="color: #9ca3af"
              >Hidden Cameras</p>
              <p
                class="mt-2 p-0 text-[14px] font-normal mb-4"
                style="color: #9ca3af"
              >Fill in these fields to locate cameras protected by passwords</p>

              <p
                class="mt-[20px] p-0 text-[12px] font-medium text-[var(--theme-font-color)] mb-2"
              >Account (Optional)</p>
              <fwb-input v-model="account" placeholder class="s4k:rounded-[8px]" id="address" style="width: 100%"></fwb-input>

              <p
                class="m-0 p-0 text-[12px] font-medium text-[var(--theme-font-color)] mb-2 mt-4 "
              >Password (Optional)</p>
              <fwb-input v-model="password" placeholder class="s4k:rounded-[8px]" id="address" style="width: 100%"></fwb-input>
            </div>
            <div class="flex justify-start mt-4 s2k:mt-2">
              <button
                id="dropdownDefaultButton"
                data-dropdown-toggle="dropdown"
                class="w-[144px] h-[41px] mt-2 text-[var(--theme-font-color)] cursor-pointer bg-[var(--theme-button-bg)] focus:ring-4 font-medium rounded-lg py-2.5 text-center inline-flex items-center justify-center s4k:rounded-[8px]"
                type="button"
                @click="addCamera"
              >
                <span
                  class="text-[14px] text-[var(--theme-font-color)] font-Medium font-[400]"
                >Scan for Cameras</span>
              </button>
            </div>
          </div>

          <div
            class="w-[841px] h-[602px] px-5 box-border relative"
          >
            <div
              class="w-[204px] h-[188px] absolute top-[50%] left-[50%] flex items-start justify-center flex-wrap"
              style="transform: translate(-50%, -50%)"
              v-if="!iscamerTable && !isAnimation"
            >
              <svg
                width="97"
                height="97"
                class=""
                viewBox="0 0 97 97"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <mask
                  id="mask0_2047_108771"
                  style="mask-type: alpha"
                  maskUnits="userSpaceOnUse"
                  x="0"
                  y="0"
                  width="97"
                  height="97"
                >
                  <rect x="0.5" y="0.5" width="96" height="96" fill="#D9D9D9" />
                </mask>
                <g mask="url(#mask0_2047_108771)">
                  <path
                    d="M65.4616 76.5H18.0384C16.5013 76.5 15.1939 75.9612 14.1163 74.8837C13.0388 73.8061 12.5 72.4987 12.5 70.9616V26.0384C12.5 24.5013 13.0388 23.1939 14.1163 22.1163C15.1939 21.0388 16.5013 20.5 18.0384 20.5H78.9616C80.4987 20.5 81.8061 21.0388 82.8837 22.1163C83.9612 23.1939 84.5 24.5013 84.5 26.0384V70.9616C84.5 72.4987 83.9612 73.8061 82.8837 74.8837C81.8061 75.9612 80.4987 76.5 78.9616 76.5H75.4627L55.5077 56.3385C54.2616 57.5385 52.8898 58.4308 51.3923 59.0154C49.8949 59.6 48.2718 59.8923 46.5231 59.8923C42.8564 59.8923 39.6795 58.5838 36.9923 55.9667C34.3051 53.3496 32.9615 50.1363 32.9615 46.3269C32.9615 42.6372 34.3051 39.4833 36.9923 36.8654C39.6795 34.2474 42.8564 32.9384 46.5231 32.9384C50.2538 32.9384 53.4186 34.2474 56.0173 36.8654C58.616 39.4833 59.9154 42.6659 59.9154 46.4131C59.9154 47.7613 59.7551 49.0154 59.4346 50.1754C59.1141 51.3354 58.4872 52.5974 57.5539 53.9615L76.8462 73.4231H78.9616C79.5769 73.4231 80.141 73.1667 80.6539 72.6539C81.1667 72.141 81.4231 71.5769 81.4231 70.9616V26.0384C81.4231 25.4231 81.1667 24.859 80.6539 24.3461C80.141 23.8333 79.5769 23.5769 78.9616 23.5769H18.0384C17.4231 23.5769 16.859 23.8333 16.3461 24.3461C15.8333 24.859 15.5769 25.4231 15.5769 26.0384V70.9616C15.5769 71.5769 15.8333 72.141 16.3461 72.6539C16.859 73.1667 17.4231 73.4231 18.0384 73.4231H62.3846L65.4616 76.5ZM46.5231 56.8154C49.482 56.8154 51.941 55.8267 53.9 53.8492C55.859 51.8718 56.8385 49.3644 56.8385 46.3269C56.8385 43.4166 55.859 40.9705 53.9 38.9885C51.941 37.0064 49.482 36.0154 46.5231 36.0154C43.6287 36.0154 41.1577 37.0064 39.11 38.9885C37.0623 40.9705 36.0385 43.4166 36.0385 46.3269C36.0385 49.3644 37.0623 51.8718 39.11 53.8492C41.1577 55.8267 43.6287 56.8154 46.5231 56.8154Z"
                    fill="#4B5563"
                  />
                </g>
              </svg>
              <p
                class="text-[14px] font-normal text-[#9CA3AF] mt-3 text-center"
              >Specify your search on the left</p>
              <div class="flex items-center justify-between mt-3 ">
                <div class="w-[72px] h-[1px] bg-[var(--theme-search-bg)]"></div>
                <span
                  class="text-[14px] font-normal text-[#9CA3AF] text-center mx-2"
                >OR</span>
                <div class="w-[72px] h-[1px] bg-[var(--theme-search-bg)]"></div>
              </div>
              <div class="flex justify-start mt-3">
                <button
                  id="dropdownDefaultButton"
                  data-dropdown-toggle="dropdown"
                  class="w-[158px] h-[41px] text-[var(--theme-font-color)] bg-[var(--theme-button-bg)] focus:ring-4 font-medium rounded-lg py-2.5 text-center inline-flex items-center justify-center s4k:rounded-[8px]"
                  type="button"
                >
                  <span
                    class="text-[14px] text-[var(--theme-font-color)] font-Medium font-[400] text-center"
                  >Scan for Cameras</span>
                </button>
              </div>
            </div>
            <div
              class="w-[147px] h-[120px] absolute top-[50%] left-[50%] flex items-start justify-center flex-wrap"
              style="transform: translate(-50%, -50%)"
              v-else-if="isAnimation"
            >
              <svg
                width="97"
                height="97"
                class=""
                :class="isAnimation ? 'animation' : ''"
                viewBox="0 0 97 97"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
              >
                <rect x="0.5" y="0.5" width="96" height="96" fill="url(#pattern0)" />
                <defs>
                  <pattern
                    id="pattern0"
                    patternContentUnits="objectBoundingBox"
                    width="1"
                    height="1"
                  >
                    <use xlink:href="#image0_2039_108692" transform="scale(0.00520833)" />
                  </pattern>
                  <image
                    id="image0_2039_108692"
                    width="192"
                    height="192"
                    xlink:href=""
                  />
                </defs>
              </svg>

              <p
                class="text-[14px] font-normal text-[#76A9FA] mt-3 w-[147px] text-center"
              >Scanning for Cameras</p>
            </div>
            <!-- 右侧 -->
            <div
              class="w-[793px] h-[628px] py-6 box-border"
              v-if="iscamerTable"
            >
              <div class="mb-4 ">
                <p
                  class="m-0 p-0 text-[14px] font-semibold text-[#9CA3AF] mb-2"
                >Found Cameras</p>
                <p
                  class="m-0 p-0 text-[14px] text-[#9CA3AF]"
                >Found 12 cameras. Select cameras to add to your collection</p>
              </div>
              <!-- table -->
              <div>
                <div class="flex items-center">
                  <div
                    class="w-auto h-[37px] py-2 px-[10px] hover:bg-[var(--theme-search-bg)] focus:bg-[var(--theme-search-bg)] dark:bg-[var(--theme-search-bg)] flex items-center justify-center box-border cursor-pointer"
                    style="border-radius: 6px 6px 0px 0px;"
                    v-for="(item,index) in tableList"
                    :key="index"
                    @click="tabsClick(index)"
                    :class="tableCount==index?'bg-[var(--theme-search-bg)] text-[var(--theme-font-color)]':'bg-[var(--theme)] text-[#6B7280]'"
                  >
                    <span
                      class="text-[14px] font-medium"
                    >{{ item.title }} ({{ item.count }})</span>
                  </div>
                </div>
                <div v-if="tableCount==0">
                  <CheckTables />
                </div>
                <!-- 第二个table -->
                <div v-else-if="tableCount==1">
                  <Table />
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </fwb-modal>
  </div>
</template>
<script>
import { onMounted, reactive, ref, watch, defineEmits } from "vue";
import { FwbInput, FwbButton, FwbModal } from "flowbite-vue";
import Table from "./Table.vue";
import CheckTables from "./CheckTables.vue";

import { defineComponent } from "vue";

export default defineComponent({
  name: "ModalScanning"
});
</script>
<script setup>
const addressOptional = ref("");
const isShowModalTable = ref(false);
const isAnimation = ref(false);
const iscamerTable = ref(false);
const tableCount = ref(0);
const isToast = ref(false);
const tableList = ref([
  {
    title: "New Cameras",
    count: 9,
    id: 1
  },
  {
    title: "Already added",
    count: 3,
    id: 1
  }
]);

const Fun = defineEmits(["close"]);

const close = () => {
  Fun("close", false);
};
const addCamera = () => {
  // if (!addressOptional.value) {
  //   return;
  // }
  isAnimation.value = true;

  // 模拟响应请求成功
  setTimeout(() => {
    isAnimation.value = false;
    iscamerTable.value = true;
  }, 2000);
};
// 切换tabs
const tabsClick = index => {
  if (tableCount.value == index) {
    return;
  }
  tableCount.value = index;
};
</script>
<style lang="scss" scoped>
#address {
  padding: 0;

  :deep(input) {
    padding-top: 0;
    padding-bottom: 0;
    height: 36px;
    background-color: var(--theme);
    border: solid var(--grid) 1px;
    font-size: 14px;
    font-family: Medium;
    color: var(--theme-font-color);

    &:focus {
      box-shadow: inset 0 0;
    }
  }
}

#dropdown {
  :focus {
    box-shadow: none;
  }

  :deep(button) {
    width: 147px;
    height: 41px;
    cursor: pointer;

    :before {
      content: "";
    }

    span {
      display: none;
    }

    svg {
      display: none;
    }
  }
}
button {
  box-shadow: none !important;
}
#camerasModal {
  :deep(.max-w-md) {
    width: 1121px !important;
    height: 688px !important;
    max-width: 1121px !important;
    button {
      cursor: pointer;

      &:hover {
        background: var(--theme-search-bg);
      }

      svg {
        color: #6B7280;
      }
    }
  }

  :deep(.bg-white) {
    border: 1px solid var(--grid);
    background-color: var(--theme) !important;
  }

  :deep(.p-6) {
    padding: 0 !important;
    border-top: 1px solid var(--grid);
  }
  :deep(.p-4) {
    padding: 0 16px 0 0 !important;
  }
}
@media screen and (min-width: 2560px) {
  #camerasModal {
    :deep(.max-w-md) {
      transform: scale(1.3);
    }
  }
}
@media screen and (min-width: 3840px) {
  #camerasModal {
    width: 1150px;
    border: solid blue;
    :deep(.max-w-md) {
      transform: scale(2);
      .p-6 {
        width: 1130px;
        height: 700px;
      }
      .bg-white {
        width: 1130px;
        height: 750px;
      }
    }
  }
}
//@media screen and (min-width: 3840px) {
//  #camerasModal {
//    :deep(.max-w-md) {
//      width: 2242px !important;
//      height: 1376px !important;
//      max-width: 2242px !important;
//    }
//
//    :deep(.bg-white) {
//      border: 2px solid var(--grid);
//      background-color: var(--theme) !important;
//    }
//
//    :deep(.p-6) {
//      padding: 0 !important;
//      border-top: 1px solid var(--grid);
//    }
//    :deep(.w-5) {
//      width: 40px;
//      height: 40px;
//    }
//    :deep(input) {
//      padding: 15px 10px;
//      height: 41px;
//      background-color: var(--theme);
//      border: solid var(--grid) 1px;
//      font-size: 28px;
//      font-family: Medium;
//      color: #ffffff;
//
//      &:focus {
//        box-shadow: inset 0 0;
//      }
//    }
//  }
//}

.bd-4b {
  border: 1px solid var(--grid);
}

@keyframes animation {
  to {
    transform: rotate(0);
  }
  from {
    transform: rotate(-360deg);
  }
}

.animation {
  transform: rotate(0);
  transform-origin: center;
  transition: all 2s linear;
  animation: animation 2s linear infinite;
}
</style>
